<template>
  <div class="campaign-counter">
    <!--顶部-->
    <div class="top_box">
      <div class="top_serach_box">
        <div class="search_box">
          <van-search
            v-model="corpName"
            show-action
            placeholder="客户名称或客户号"
          >
            <template #action>
              <div @click="onSearch">搜索</div>
            </template>
          </van-search>
        </div>
        <div class="search_right" @click="addBtnClick">导出数据</div>
      </div>
      <div class="top_btn_box">
        <div class="top_btn_box_left" @click="showDate = true">
          <div class="top_btn_box_left_time">
            <div class="zoufangdate">
              <van-icon name="notes-o" size="14"/>
              <div>{{ beginDate }}</div>
              <!-- <van-icon name="arrow" /> -->
            </div>
          </div>
          至
          <div class="top_btn_box_left_tag">
            <div class="zoufangdate">
              <van-icon name="notes-o" size="14"/>
              <div>{{ endDate }}</div>
            </div>
          </div>
          <van-icon
            name="close"
            style="font-size: 18px"
            @click.stop="clearTime"
          />
        </div>
      </div>
    </div>
    <!--滑动区域-->
    <div class="body-list">
      <infoItem
        :info="item"
        v-for="(item, index) in newArr"
        :key="index"
        @checkDetail="checkDetail"
      ></infoItem>
    </div>
    <!-- 日期选择器 -->
    <van-calendar
      v-model="showDate"
      :min-date="minDate"
      :max-date="maxDate"
      color="#1989fa"
      type="range"
      @confirm="onConfirm"
    />
    <!-- 导出列表 -->
    <transition name="bottomToTop05">
      <bankList
        ref="bankList"
        v-if="showBank"
        @cancel="cancel"
        :bankList="bankList"
        @searchBank="searchBank"
      ></bankList>
    </transition>
  </div>
</template>
<script>
import { getOverview } from "@/interfaces/marketingExtension";
import leadTrackerList from "@/components/marketingExtension/leadTrackerList.vue";
import infoItem from "@/components/marketingExtension/infoItem.vue";
import bankList from "@/components/marketingExtension/bankList.vue";
export default {
  name: "campaign-counter",
  /*1. Vue扩展 */
  extends: "", // extends和mixins都扩展逻辑，需要重点放前面
  mixins: [],
  components: { leadTrackerList, infoItem, bankList },
  /* 2. Vue数据 */
  props: {},
  model: { prop: "", event: "" }, // model 会使用到 props
  data() {
    return {
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(),
      newArr: [], // 数据列表
      beginDate: "开始时间", // 开始时间
      endDate: "结束时间", // 结束时间
      corpName: "", // 搜索内容
      showDate: false,
      bankList: [],
      oriBanklist: [],
      showBank: false,
    };
  },
  computed: {},
  watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
  /* 3. Vue资源 */
  filters: {},
  directives: {},
  /* 4. Vue生命周期 */
  created() {
    this.initPage();
  },
  mounted() {},
  destroy() {},
  /* 5. Vue方法 */
  methods: {
    cancel() {
      this.showBank = false;
    },
    checkDetail(item) {},
    onConfirm(date) {
      const [start, end] = date;
      this.beginDate = this.$dayjs(start).format("YYYY-MM-DD"); // 开始时间
      this.endDate = this.$dayjs(end).format("YYYY-MM-DD"); // 结束时间
      this.showDate = false;
      this.initPage();
    },
    clearTime() {
      this.beginDate = "开始时间";
      this.endDate = "结束时间";
      this.initPage();
    },
    onSearch() {
      this.initPage();
    },
    searchBank(item) {
      this.bankList = this.oriBanklist.filter(
        (pre) => pre.bankName.indexOf(item) !== -1
      );
    },
    addBtnClick() {
      this.bankList = this.oriBanklist;
      this.showBank = true;
    },
    async initPage() {
      const params = {
        beginDate: this.beginDate === "开始时间" ? "" : this.beginDate,
        endDate: this.endDate === "结束时间" ? "" : this.endDate,
      };
      const res = await getOverview(params);
      // console.log(res, "res");
      this.oriBanklist = JSON.parse(JSON.stringify(res.data));
      this.bankList = this.oriBanklist;
      this.newArr = res.data.filter(
        (d) =>
          d.bankName &&
          (d.bankName.indexOf(this.corpName.toLowerCase()) !== -1 ||
            d.bankName.indexOf(this.corpName.toUpperCase()) !== -1)
      );
    },
  },
};
</script>
<style scoped lang="scss">
.campaign-counter {
  position: relative;
  height: 100%;
  overflow: hidden;
  .top_box {
    background-color: #fff;
    z-index: 99;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 104px;
    padding-bottom: 6px;
    box-shadow: 0px 10px 9px -6px rgba(0, 0, 0, 0.18);
    // border: 1px solid red;
    .top_serach_box {
      margin: 0 auto;
      border-radius: 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 10px;
      .search_box {
        background: #fff;
        width: 80%;
        border-radius: 12px;
        background: #f7f8fa;
        margin-right: 10px;
        /* border: 1px solid red; */
      }
      .search_right {
        width: 20%;
        height: 30px;
        background: #4b8fe4;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
      }

      .van-search {
        // padding: 0 !important;
      }
    }
    .top_btn_box {
      // border: 1px solid red;
      width: 95%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      padding: 0;

      .top_btn_box_left {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #767676;
        background-color: #f6f6f6;
        border-radius: 6px;
        padding: 0 10px;
        height: 40px;
        // border: 1px solid red;
      }

      .top_btn_box_left_time {
        padding: 10px 0;
        flex: 1;
        // border: 1px solid red;
        .zoufangdate {
          flex: 1;
          // border: 1px solid red;
          height: 26px;
          justify-content: center;
          display: flex;
          align-items: center;
          & > div {
            // flex: 1;
            margin-left: 4px;
            font-size: 14px;
          }
        }
      }

      .top_btn_box_left_tag {
        background-color: #f6f6f6;
        // padding: 10px 0;
        flex: 1;
        align-content: center;
        justify-content: center;
        .zoufangdate {
          flex: 1;
          // border: 1px solid red;
          height: 20px;
          justify-content: center;
          display: flex;
          align-items: center;
          & > div {
            // flex: 1;
            margin-left: 4px;
            font-size: 14px;
          }
        }
      }

      .top_btn_box_right {
        width: 28%;
        background-color: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 10px;
        color: #767676;
        border-radius: 6px;
      }
    }
  }
  .body-list {
    position: absolute;
    top: 110px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow-y: auto;
    // border: 1px solid red;
  }
}
</style>
